import React from "react";

function List(props) {
  let list = props.list;
  let listItems = list.map((item,index) => {
  return <li key={item}>{index}:{item}</li>;
  });
  // 如果不想用 return ，可以直接写出要 return 的内容：
  // let listItems = list.map((item,index) => <li key={item}>{index}:{item}</li>);
  return <ul>{listItems}</ul>;
}

export default class ShowList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["杨戬", "李白", "韩信", "玄策"],
    };
  }
  render() {
    return <List list={this.state.list} />;
    // 也可以直接渲染列表：
    // return (
    //   <ul>
    //     { this.state.list.map(item=><li key={item}>{item}</li>) }
    //   </ul>
    // )
  }
}
